<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>群发任务管理</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all">
<script type="text/javascript" src="js/base64/base64.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var laypage;
var nowPage = 1;
var pageSize = 10;
var isPageLoad = 0;


layui.use(['laypage', 'layer'], function(){
  laypage = layui.laypage
});

function ajax(msg) {
	var event = document.createEvent('MessageEvent');
	var origin = window.location.protocol + '//' + window.location.host;
	event.initMessageEvent('MessageReceived', true, true, msg, origin, 1234, window, null);
	document.dispatchEvent(event);
}
// 全局接收消息事件
function messageReceived(res) {
	res = Base64.decode(res);
	res = JSON.parse(res);
	//标签搜索
	if (res.type == "Pages") {
		Pages(res.data);
	}
	else if(res.type == "Rreshen")
	{
		$('#result_count').html("0");
		isPageLoad = 0;
		pages(1,pageSize);
	}
}

function Pages(data)
{
	if (data["list"].length != 0) {
		var html = '';
		var result_count = 0;

		for (var i in data["list"]) {
			var item = data["list"][i];
			var status = item['status'] == 0 ? "待发" : "锁定";
			html +='<tr>';
			html += '<td><input type="checkbox"  value="' + item['id'] + '" name="layTableCheckbox" lay-skin="primary"></td></td>';
			html += '<td width="220"><div><img src="'+ item['heardpic'] +'" height="45" width="45" /><span style="position:absolute;left:68px ; top:10px ">'+ item['usernick'] +'</span></div></td>';
			html += '<td>' + item['content'] + '</td>';
			html += '<td>' + status + '</td>';
	      	html += '<td>' + formatDate(item['send_time'] * 1000) + '</td>';
	      	html += '<td>' + formatDate(item['add_time'] * 1000) + '</td>';
	      	html +='</tr>';

    		result_count++;
		}
		$("#result").html(html);
		if(isPageLoad == 0)
		{
			isPageLoad = 1;
			setTimeout(function () {
			//总页数低于页码总数
			  laypage.render({
			    elem: 'pages'
			    ,count: data['totalCount'] //数据总数
			    ,jump: function(obj){
			    	if(obj.curr != nowPage)
			    	{
			    		nowPage = obj.curr;
			    		pages(nowPage,pageSize);
			    	}
			    }
			  });
			}, 500);
		}
	}
	else
	{
		$("#result").html('<tr><td colspan="10" style="text-align: center; color: #C0C0C0; font-size: 12px;">没有找到内容，换一个试试</td></tr>');
	}
}

function formatDate(now) {
	now = new Date(now);
     var year=now.getFullYear(); 
     var month=now.getMonth()+1; 
     var date=now.getDate(); 
     var hour=now.getHours(); 
     var minute=now.getMinutes(); 
     var second=now.getSeconds(); 
     return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
}

</script>
<style type="text/css">
body{ padding: 10px; }
</style>
</head>
<body>
<table class="layui-table">
<thead>
    <tr>
      <th colspan="7">选中结果：<span id="result_count">0</span> <a class="layui-btn layui-btn-xs xedit" lay-event="edit" id="delete">删除</a></th>
    </tr> 
  </thead>
  <thead>
    <tr>
      <th><input name="layTableCheckbox1" type="checkbox" id="layTableCheckbox1" lay-skin="primary"></th>
      <th>用户</th>
      <th>状态</th>
      <th>内容</th>
      <th>发布时间</th>
      <th>添加时间</th>
    </tr> 
  </thead>
  <tbody id="result">
    	<tr>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
      <td>-</td>
    </tr> 
  </tbody>
</table>
<div id="pages"></div>
</body>
<script type="text/javascript">

	function pages(currentPage,pageSize)
	{
		var data_opt = {
				type: "Pages",
				data: {
					page:currentPage,
					pagesize:pageSize
				}
			}
		data_opt = JSON.stringify(data_opt);
		ajax(data_opt);
	}

	$("#delete").click(function(){
			var tags = "";
			var join = "";
          	$.each($('#result input:checkbox:checked'),function(){
          		tags += join +  $(this).val();
          		join = "\n";
            });

			var data_opt = {
				type: "Delete",
				data: {
					id: tags
				}
			}
			data_opt = JSON.stringify(data_opt);
			ajax(data_opt);
	});

$(document).ready(function(){
	pages(1,pageSize);
	$("input[name=layTableCheckbox1]").click(function () {
        if (this.checked) {
            $("#result :checkbox").prop("checked", true);
        } else {
            $("#result :checkbox").prop("checked", false);
        }
        var len = $("#result input:checkbox:checked").length; 
        $('#result_count').html(len); 
    });

      $("#result input:checkbox").click(function(){ 
        var len = $("#result input:checkbox:checked").length; 
        $('#result_count').html(len); 
    }) 
});

</script>

</html>
